<template>
    <div class="container">
        <el-button class="add-adviser" type="primary" @click="handleAdviser">新增</el-button>
        <div class="search-content">
        
        </div>
        <div class="search-list">
            <el-table 
                border 
                :data="dataList" 
                :height="oHeight" 
                :header-cell-class-name="hdCellClassName" 
                :row-class-name="tableRowClassName"
                @row-click="onRowClick"
            >
                <el-table-column 
                  label="排序"
                  min-width="100"
                  align="center"
                  #default="{row}"
                >
                    <el-input 
                    v-model.number="row.sort" 
                    class="input-sort" 
                    align=center 
                    placeholder="排序"
                    @blur="handleUpdate(row, 'sort')"
                    @change="handleChange(row)"
                  ></el-input>
                </el-table-column>
                <el-table-column 
                  prop="brand1_name" 
                  label="品牌"
                  min-width="160"
                  align="center"
                >
                </el-table-column>
                <el-table-column 
                  prop="brand2_name" 
                  label="品牌名称"
                  min-width="160"
                  align="center"
                >
                </el-table-column>
                <el-table-column 
                  prop="store_id"
                  label="对应店铺ID"
                  min-width="130"
                  align="center"
                >
                </el-table-column>
                <el-table-column 
                  prop="is_top"
                  label="是否首页展示"
                  min-width="130"
                  align="center"
                >
                  <template #default="{row}">
                      <el-switch
                        v-model="row.is_top"
                        size="small"
                        @change="val => handleUpdate(row, 'is_top', val)"
                        active-color="#13ce66">
                      </el-switch>
                  </template>
                </el-table-column>
                <el-table-column 
                  prop="pc_name" 
                  label="操作"
                  width="140"
                  align="center"
                  fixed="right">
                  <template #default="{row}">
                    <el-button type="text" @click="handleAdviser(row)">编辑</el-button>
                    <el-button type="text" @click="messageBox(row)">删除</el-button>
                  </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="bottom">
            <div class="btn-group">
            </div>
            <div class="paginationOne">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageArr.curpage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageArr.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageArr.total">
                </el-pagination>
            </div>
        </div>
        <brand-adviser-eidt :options="options" @getData="getData"></brand-adviser-eidt>
    </div>
</template>
<script>
import { resize } from "@/common/js/height.js";
import {dateFormatter} from "@/common/js/util";
import brandAdviserEidt from './brand-adviser-eidt'
import {adviser} from './urlApi';
export default {
    components: {brandAdviserEidt},
    data() {
        return {
            currIndex: null,         // 当前操作的行索引
            stateList: [
                {label: '全部 ', value:''},
				{label: '未开通 ', value: 1},
				{label: '已开通', value: 2}
            ],
            pageArr: {
                curpage: 1,           // 当前页码
                pageSize: localStorage.getItem('pageSize') * 1 || 10,         // 每页显示数量
                total: 0              // 数据总数
            },
            dataList: [],             // 列表数据
            oHeight: 600,             // 默认高度, 其值会在mounted中的resize进行重新计算
            options: {                // 对话框参数
                visible: false,
                row: null
            }
        }
    },
    computed: {
        getState() {
            return function(val) {
                return this.stateList.filter(item => item.value == val)[0].label;
            }
        }
    },
    methods: {
        hdCellClassName() {
            return 'hdCellStyle'
        },
        tableRowClassName({row, rowIndex}) {
            // 把每一行的索引放进row
            row.index = rowIndex;
        },
        onRowClick(row) {
            this.currIndex = row.index
        },
        _dateFormatter(row) {
            return dateFormatter("YYYY-MM-DD HH:mm:ss", row.pc_addtime*1000)
        },
        messageBox(row) {
            this.$confirm('确定删除该品牌顾问信息吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info'
            }).then(() => {
                this.handleUpdate(row, 'is_del', 1);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                })
            })
        },
        async handleUpdate(row, type = null, value) {
            let datas = {id: parseInt(row.id)};
            
            if(type == 'sort') datas[type] = row[type]
            else datas[type] = value ? 1 : 0
            const res = await adviser.update(datas)
            if(res.code == 1) {
                this.$message.success(res.msg);
                this.getData();
            } else {
                this.$message.error(res.msg);
            }
        },
        handleChange(row) {
            row.isChange = true;
        },
        async getData() {
            let datas = {
                pagesize: this.pageArr.pageSize,
                curpage: this.pageArr.curpage
            }
            const res = await adviser.get(datas)
            if(res.code == 1) {
                this.dataList = res.data.list.map(item => {
                    item.is_top = (item.is_top == 1 ? true : false)
                    return item
                })
                this.pageArr.total = parseInt(res.data.TotalNum)
            }
        },
        handleSizeChange(pageSize) {
            localStorage.setItem('pageSize', pageSize);
			this.pageArr.pageSize = pageSize;
			this.pageArr.curpage = 1;
			this.getData();
        },
        handleCurrentChange(page) {
			this.pageArr.curpage = page;
			this.getData();
        },
        handleAdviser(row = null) {
            this.options.row =  row ? JSON.parse(JSON.stringify(row)) : null;
            this.options.visible = true;
        }
    },
    created() {
        this.getData()
    },
	mounted() {
		resize(this)
	}
}
</script>
<style lang="scss" scoped>
.container {
    .add-adviser {
        position: absolute;
        top: 12px;
        right: 10px;
    }
    /deep/.search-list {
        .input-sort input {
            width: 60px;
            text-align: center;
        }
    }
    .brand_icon {
        width: 60px;
        height: 60px;
        background: #F5F7FA;
        display: flex;
        margin: 0 auto;
        align-items: center;
        justify-content: space-around;
    }
}
</style>
